<!--上传文件-->
<template>
  <el-upload
    v-model="value"
    v-bind="extend"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
    :accept="myAccept"
    :action="action"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-change="myChange"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
    :file-list="fileList"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
    <video width="320" height="240" id="vv" controls>
      您的浏览器不支持Video标签。
    </video>
  </el-upload>{{myvideo}}
</template>

<script >
import { defineComponent, ref, reactive, computed } from 'vue'
import { ElUpload, ElButton, ElMessage, ElMessageBox } from 'element-plus'
// 引入组件需要的属性、控制类
import { itemProps, itemController } from '../../map'

export default defineComponent({
  name: 'el-form-item-text',
  inheritAttrs: false,
  components: {
    ElUpload, ElButton
  },
  props: {
    ...itemProps, // 基础属性
    accept: {
      type: [String, Array],
      default: ''
    },
    modelValue: [String]
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    // console.log('props-text', props)
    // console.log('props-ctx', context)
    const {
      value,
      run,
      clear,
      myinput
    } = itemController(props, context.emit)

    // 转换允许上传的类型
    const myAccept = computed(() => {
      if (Array.isArray(props.accept)) {
        return props.accept.join(',')
      } else {
        return props.accept
      }
    })

    const fileList = reactive([
      {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      },
      {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      },
    ])

    const myvideo = ref('')

    const myChange = (file, fileList) => {
      console.log(file, fileList)
      const url = window.URL.createObjectURL(file.raw)
      myvideo.value = url
      document.getElementById('vv').src = url
    }

    const handleRemove = (file, fileList) => {
      console.log(file, fileList)
    }
    const beforeRemove = (file, fileList) => {
      return ElMessageBox.confirm(`真的要删除 ${file.name} 文件吗？`)
    }
    
    const handlePreview = (file) => {
      console.log(file)
      myvideo.value = file
    }
    
    const handleExceed = (files, fileList) => {
      ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${
          files.length + fileList.length
        } totally`
      )
    }
    
    return {
      fileList,
      handleRemove,
      handlePreview,
      handleExceed,
      myChange,
      beforeRemove,
      value,
      myAccept, // 允许上传的文件类型
      myvideo, // 视频
      run,
      clear,
      myinput
    }
  }
})
</script>
